<template>
  <div class="unit-baaseinfo-form-view-wrap" v-loading="loading">
    <div v-show="!showEdit">
      <el-row v-if="hasFather" type="flex" justify="start">
        <div class="iconfont icon-return return-btn" @click="returnFun" title="返回"></div>
      </el-row>
      <el-row class="base-info-wrap" :gutter="20">
        <el-col :span="22">
          <p class="model-title">单位基本信息</p>
        </el-col>
        <el-col :span="2" style="display:flex;justify-content:flex-end;">
          <el-button
            v-if="isEdit && $store.state.buttonPermission[$store.state.currentTabName].indexOf('editUnit') > -1"
            type="primary"
            @click="openEdit"
          >编辑</el-button>
        </el-col>
        <el-col :span="12">
          <el-form v-if="baseInfo.organizationId" label-width="150px" class="demo-table-expand" @submit.native.prevent>
            <el-form-item label="图标(logo)：">
              <img
                :src="baseInfo.logoUrl"
                width="50"
                height="50"
                @click="$imgPreview"
                :data-imgpreview="baseInfo.logoUrl"
              />
            </el-form-item>
            <el-form-item label="单位简称：">
              <span>{{ baseInfo.shortName }}</span>
            </el-form-item>
            <el-form-item label="单位全称：">
              <span>{{ baseInfo.name }}</span>
            </el-form-item>
            <el-form-item label="成立时间：">
              <span>{{ formatDateTime(baseInfo.foundedTime) }}</span>
            </el-form-item>
            <el-form-item label="值班电话：">
              <span>{{ baseInfo.tel }}</span>
            </el-form-item>
            <el-form-item label="电子邮箱：">
              <span>{{ baseInfo.email || '-'}}</span>
            </el-form-item>
            <el-form-item label="地址：">
              <span>{{ baseInfo.address }}</span>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="邮政编码：">
                  <span>{{ baseInfo.postalCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="范围（米）：">
                  <span>{{ baseInfo.radius }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="微型消防站：">
                  <span>{{ baseInfo.isMircoFireStation==1 ? '有' : '无' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专职消防队：">
                  <span>{{ baseInfo.isFullTimeStation==1 ? '有' : '无' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="兼职消防队：">
                  <span>{{ baseInfo.isPartTimeStation==1 ? '有' : '无' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="12">
          <!-- 地图 -->
          <div id="UnitBaseInfoFormViewBaiduMap" style="width: 100%; height: 410px;"></div>
        </el-col>
      </el-row>
      <el-row v-if="baseInfo.vrUrl">
        <el-col :span="24">
          <p class="model-title">单位VR</p>
        </el-col>
        <!-- VR -->
        <el-col class="vr-wrap" :span="24">
          <iframe
            id="aouc_right_ac_six_IframeVR"
            name="aouc_right_ac_six_IframeVR"
            :src="baseInfo.vrUrl"
            width="100%"
            height="423px"
            frameborder="0"
            scrolling="no"
          ></iframe>
        </el-col>
      </el-row>
      <el-row class="other-info-wrap">
        <el-col :span="4">
          <div class="detec_num">
            <p class="info-min-width">探测器个数</p>
            <p class="detec_num_more">{{baseInfo.detecorNumber}}</p>
          </div>
        </el-col>
        <el-col :span="20">
          <el-form v-if="baseInfo.organizationId" label-width="150px" class="demo-table-expand" @submit.native.prevent>
            <el-row>
              <el-col :span="8">
                <el-form-item label="占地面积(m²)：">
                  <span>{{ baseInfo.floorSpace }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="防火等级：">
                  <span>{{ baseInfo.fireRatingName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属消防队：">
                  <span>{{ baseInfo.belongsFireBrigade }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="总建筑面积(m²)：">
                  <span>{{ baseInfo.overallFloorage }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职工人数(人)：">
                  <span>{{ baseInfo.workerNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属消防队号码：">
                  <span>{{ baseInfo.belongsFireBrigadeMobile }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row class="build-info-wrap">
        <el-col :span="24">
          <p class="model-title">楼栋信息</p>
        </el-col>
        <el-col :span="24">
          <el-table :data="storiedBuildInfo" max-height="250" style="width: 100%">
            <el-table-column prop="name" label="楼栋"></el-table-column>
            <el-table-column prop="buildSpace" label="建筑面积（㎡）"></el-table-column>
            <el-table-column prop="buildHeight" label="建筑高度（m）"></el-table-column>
            <el-table-column prop="location" label="值班室位置"></el-table-column>
            <el-table-column prop="dutyAccountsName" label="值班人员"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-form v-if="baseInfo.organizationId" label-width="110px" class="demo-table-expand" @submit.native.prevent>
          <el-row>
            <el-col :span="8">
              <el-form-item label="安全责任人：">
                <template v-for="item in baseInfo.contacts">
                  <p v-if="item.role == 9" :key="item.id" class="people-info">
                    <span>{{ item.name }}</span>
                    <span>{{ item.phone }}</span>
                  </p>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全管理人：">
                <template v-for="item in baseInfo.contacts">
                  <p v-if="item.role == 10" :key="item.id" class="people-info">
                    <span>{{ item.name }}</span>
                    <span>{{ item.phone }}</span>
                  </p>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="消防持证上岗人员：" label-width="150px" class="fire-fighting-certified-staff">
            <template v-if="baseInfo.firefighters.length > 0">
              <div class="xfcgInfo" v-for="item in baseInfo.firefighters" :key="item.id">
                <img
                  :src="item.certificateUrl"
                  class="imaInfo"
                  @click="$imgViewer"
                  :data-imgpreview="item.certificateUrl"
                />
                <div class="nameInfo" id="namInfo">{{item.name}}</div>
                <div class="phoneInfo" id="phoInfo">{{item.tel}}</div>
              </div>
            </template>
            <div v-else class="xfcgInfo">
              <div class="imaInfo no-people"></div>
              <div class="nameInfo" id="namInfo">人员暂无</div>
              <div class="phoneInfo" id="phoInfo">号码暂无</div>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="maintenance-info-wrap">
        <el-form v-if="baseInfo.organizationId" label-width="125px" class="demo-table-expand" @submit.native.prevent>
          <el-row>
            <el-col :span="8">
              <el-form-item label="维保公司名称：">
                <p>{{ baseInfo.maintainCompanyName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维保合同编号：">
                <p>{{ baseInfo.maintainContract }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维保合同期限：">
                <p>{{ formatDateTime(baseInfo.maintainStartDate) + '-' + formatDateTime(baseInfo.maintainEndDate)}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="维保人员：" label-width="95px" class="fire-fighting-certified-staff">
            <template v-if="maintenanceUserList.length > 0">
              <div class="wbry-info" v-for="item in maintenanceUserList" :key="item.accountName">
                <div class="nameInfo ell">{{item.name}}</div>
                <div class="postInfo ell">{{item.postName}}</div>
                <div class="phoneInfo">{{item.phone}}</div>
              </div>
            </template>
            <div v-else class="text-center">
              <p>暂无维保人员信息</p>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <transition v-if="showEdit">
      <unit-base-info-form-edit
        :closeFun="closeEdit"
        :organizationId="organizationId"
        :id="id"
        :oldInfo="baseInfo"
        :buildInfo="storiedBuildInfo"
      ></unit-base-info-form-edit>
    </transition>
  </div>
</template>

<script>
import BMap from 'BMap'
import utils from '@/utils/util'
import { getFullInfoExt } from '@/api/org'
import { getHaveOrgUserList } from '@/api/maintence'
import unitBaseInfoFormEdit from './UnitBaseInfoFormEdit'
import { getStoriedBuildList } from '@/api/fbs'

export default {
  name: 'UnitBaseInfoFormView',
  props: {
    organizationId: {
      required: true,
    },
    hasFather: {
      type: Boolean,
      default() {
        return false
      },
    },
    returnFun: {
      type: Function,
      default() {
        return () => {}
      },
    },
  },
  components: {
    unitBaseInfoFormEdit,
  },
  data() {
    return {
      id: '',
      showEdit: false,
      isEdit: true,
      loading: true,
      baseInfo: {},
      maintenanceUserList: [],
      // 楼栋信息
      storiedBuildInfo: [],
    }
  },
  created() {
    // 获取详细信息
    this.getInfo()
    // 获取维保人员信息
    this.getMaintenanceUser()
    // 获取单位楼栋信息
    this.getUnitBuildList()
  },
  methods: {
    getInfo() {
      let that = this
      // 获取详细信息
      getFullInfoExt({
        organizationId: that.organizationId,
      }).then((res) => {
        that.baseInfo = res.data
        // 初始化地图
        if (res.data.longitude && res.data.latitude) {
          that.initMap(res.data.longitude, res.data.latitude)
        }
        that.id = res.data.id
        that.loading = false
      })
    },
    getMaintenanceUser() {
      let that = this
      getHaveOrgUserList({
        orgIds: that.organizationId,
        roleIds: '185,184,183',
      }).then((res) => {
        if (res.status === 200) {
          that.maintenanceUserList = res.data.length > 0 ? res.data : []
        }
      })
    },
    initMap(longitude, latitude) {
      var map = new BMap.Map('UnitBaseInfoFormViewBaiduMap')
      var point = new BMap.Point(longitude, latitude)
      var marker = new BMap.Marker(point) // 创建标注
      map.centerAndZoom(point, 15)
      map.enableScrollWheelZoom(true) //滚轮事件
      map.addOverlay(marker)
      map.panTo(point) // 将标注添加到地图中
    },
    openEdit() {
      this.showEdit = true
    },
    closeEdit(flag) {
      this.showEdit = false
      if (typeof flag !== 'object' && flag) {
        this.getInfo()
        this.getUnitBuildList()
      }
    },
    formatDateTime: function (value) {
      if (value) {
        return utils.ilinkTimeformat.format(new Date(value), 'yyyy年M月d日')
      } else {
        return '-'
      }
    },
    // 获取单位楼栋信息
    getUnitBuildList() {
      let that = this
      getStoriedBuildList({
        queryType: 0,
        orgId: that.organizationId,
      }).then((res) => {
        if (res.status === 200) {
          that.storiedBuildInfo = res.data
        }
      })
    },
  },
}
</script>
<style lang="scss">
.unit-baaseinfo-form-view-wrap {
  .base-info-wrap {
    border-bottom: 1px solid #e1e1e1;
  }
  .other-info-wrap {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    margin-top: 20px;
  }
  .build-info-wrap {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e1e1;
    .model-title {
      height: 40px;
    }
  }
  .model-title {
    height: 55px;
    line-height: 40px;
    font-size: 16px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .vr-wrap {
    height: 423px;
    iframe {
      position: relative;
    }
  }
  .detec_num {
    text-align: center;
    background-color: #f2f2f2;
    width: 231px;
    color: #999999;
    margin-top: 11px;
    height: 66px;
    .info-min-width {
      line-height: 30px;
    }
    .detec_num_more {
      font-size: 28px;
      color: #5c90d2;
    }
  }
  .people-info {
    span {
      margin-left: 30px;
      margin-right: 10px;
    }
  }
  .fire-fighting-certified-staff {
    .el-form-item__label {
      display: inline-block;
      float: none;
    }
    .el-form-item__content {
      margin-left: 0 !important;
      .xfcgInfo {
        width: 385px;
        height: 144px;
        margin-top: 18px;
        background-color: #f2f2f2;
        margin-bottom: 30px;
        float: left;
        margin-left: 15px;
        .phoneInfo {
          float: left;
          margin-left: 35px;
          font-size: 20px;
        }
        .nameInfo {
          float: left;
          margin-left: 35px;
          font-size: 20px;
          margin-top: 45px;
        }
        .imaInfo {
          display: block;
          width: 159px;
          height: 100px;
          margin-top: 20px;
          margin-left: 29px;
          background-color: #888;
          float: left;
          border-radius: 10px;
        }
        .no-people {
          background: url(../../../assets/images/default/czry.png) 0 0 no-repeat;
        }
      }
    }
  }
  .maintenance-info-wrap {
    border-top: 1px solid #e1e1e1;
    .wbry-info {
      float: left;
      padding: 10px 30px;
      width: 250px;
      height: 110px;
      line-height: 30px;
      margin-top: 10px;
      background-color: #f2f2f2;
      margin-bottom: 10px;
      margin-left: 15px;
      .nameInfo {
        font-size: 18px;
      }
      .postInfo {
        color: #999;
      }
      .phoneInfo {
      }
    }
  }
}
</style>

